<template>
	<view class="container home-wrap" :style="{ 'background':'#fff'}">
		<shopro-navbar :isBack="true" :background="{'background':'#fff'}">
			<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">错题本</text>
		</shopro-navbar>
		<view class="u-p-l-20 u-p-r-20">
			<!-- 当前科目选择 -->
			<view class="subject-select">
				<text>当前科目</text>
				<view v-model="selectedTypeIdx" class="picker u-flex u-flex-items-center " @click="jump('/pages/index/chooseCourse')">
					<view class="picker-btn">{{ examTypes[selectedTypeIdx] }}</view>
					<!--<u-icon name="arrow-down" size="20" :color="'#1976ff'"></u-icon>-->
					<view class="picker-btn-down"><image :src="HTTP_IMG_URL()+'/static/images/arrow-down.png'" model="aspectFill"></image></view>
				</view>
			</view>
			<!-- Tab 切换 -->
			<view class="tab-bar">
				<view :class="['tab', activeTab === 0 ? 'active' : '']" @click="activeTab = 0">章节练习</view>
				<view :class="['tab', activeTab === 1 ? 'active' : '']" @click="activeTab = 1">模拟试卷</view>
			</view>
			<!-- 章节练习表格 -->
			<view v-if="activeTab === 0">
				<view class="table" v-if="chapterList.length>0">
					<view class="table-header">
						<text class="th">章节练习</text>
						<text class="th">错题数</text>
						<text class="th"></text>
					</view>
					<view v-for="(item, idx) in chapterList" :key="idx" class="table-row">
						<view class="td"><view class="u-line-1">{{ item.chapter }}</view></view>
						<text class="td u-line-1">{{ item.rate > 0 ? item.rate : '0' }}</text>
						<view class="td u-flex u-flex-around u-flex-items-center">
							<view class="td do-btn continue-btn" @click="handleContinue(idx)">
								查看解析
							</view>
							<view class="td do-btn" @click="handleStart(idx)">
								{{ '开始做题' }}
							</view>
						</view>
					</view>
				</view>
				<view class="empty u-flex u-flex-column u-flex-center u-flex-items-center" v-else>
					<image :src="HTTP_IMG_URL()+'/static/images/empty.png'"></image>
					<text class="empty-text">暂无数据</text>
				</view>
			</view>
			<view v-else>
				<view v-if="shijuan.length>0"></view>
				<view class="empty u-flex u-flex-column u-flex-center u-flex-items-center" v-else>
					<image :src="HTTP_IMG_URL() + '/static/images/empty.png'"></image>
					<text class="empty-text">暂无数据</text>
				</view>
			</view>
		</view>
		
		<!-- 自定义弹窗 -->
		<view v-if="showContinueDialog" class="popup-mask">
			<view class="popup-dialog">
				<view class="popup-content">本章节有未完成的做题记录，<br/>是否继续</view>
				<view class="popup-actions">
					<view class="popup-btn" @click="restartAnswer">重新开始</view>
					<view class="popup-btn primary" @click="continueAnswer">继续答题</view>
				</view>
			</view>
		</view>
		
		<!-- 去购买弹窗 -->
		<view v-if="showBuyDialog" class="popup-mask">
			<view class="popup-dialog">
				<view class="popup-content">很抱歉，您还未购买相应课程，<br/>无法查看相关资料哦！</view>
				<view class="popup-actions">
					<view class="popup-btn" @click="cancelBuy">取消</view>
					<view class="popup-btn primary" @click="goBuy">去购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
import { record } from '@/api'
export default {
	data() {
		return {
			examTypes: ['CAAC', 'UTC', '其他'],
			selectedTypeIdx: 0,
			subjects: ['CAAC', '科目二', '科目三'],
			subjectIndex: 0,
			activeTab: 0,
			chapterList: [],
			isPurchased: true, // 是否已购买
			showContinueDialog: false,
			showBuyDialog: false,
			currentChapterIndex: null,
			pendingAction: null, // 'start' or 'continue'
			shijuan:[]
		}
	},
	computed: mapGetters(['isLogin', 'uid', 'userInfo']),
	onLoad() {
		this.getWrongList();
	},
	methods: {
		HTTP_IMG_URL() {
			return this.$imgUrl;
		},
		getWrongList () {
			record.getWrongList({
				cate_id: '1'
			}).then((res) => {
				if (res.response.data.code == 1) {
					this.chapterList = res.response.data.data;
					console.log(res.response.data.data, 'getWrongList');
				}
			})
		},
		handleStart(idx) {
			if (!this.isPurchased) {
				this.showBuyDialog = true;
				this.pendingAction = 'start';
				this.currentChapterIndex = idx;
				return;
			}
			this.onStartClick(idx);
		},
		handleContinue(idx) {
			// if (!this.isPurchased) {
			// 	this.showBuyDialog = true;
			// 	this.pendingAction = 'continue';
			// 	this.currentChapterIndex = idx;
			// 	return;
			// }
			// this.onContinueClick(idx);
			uni.navigateTo({url:'/pages/questionnaire/zuoti?type=jiexi'})
		},
		onContinueClick(idx) {
			this.currentChapterIndex = idx;
			this.showContinueDialog = true;
		},
		onStartClick(idx) {
			// 这里可以写开始做题的跳转逻辑
			uni.navigateTo({url:'/pages/questionnaire/zuoti'})
			// uni.showToast({ title: '开始做题', icon: 'none' });
		},
		restartAnswer() {
			this.showContinueDialog = false;
			// 这里可以写重新开始的逻辑
			uni.showToast({ title: '重新开始', icon: 'none' });
		},
		continueAnswer() {
			this.showContinueDialog = false;
			// 这里可以写继续答题的逻辑
			uni.navigateTo({url:'/pages/questionnaire/zuoti'})
		},
		// 购买弹窗相关
		cancelBuy() {
			this.showBuyDialog = false;
			this.pendingAction = null;
		},
		goBuy() {
			this.showBuyDialog = false;
			// 这里可以写跳转购买页逻辑
			uni.showToast({ title: '跳转购买页', icon: 'none' });
			this.pendingAction = null;
		},
		jump(e) {
			uni.setStorageSync("course", this.examTypes[this.selectedTypeIdx]);
			uni.navigateTo({
				url: e+'?value='+this.examTypes[this.selectedTypeIdx]
			})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	background: #f8f9fb;
	min-height: 100vh;
}
.header {
	text-align: center;
	padding: 40rpx 0 20rpx 0;
}
.title {
	font-size: 36rpx;
	font-weight: bold;
}
.subject-select {
	width: 95%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f6f6f8;
	border-radius: 24rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.label {
	font-size: 28rpx;
	color: #666;
	margin-right: 20rpx;
}
.picker {
	color: #1976ff;
}
.picker-value {
	color: #3a7afe;
	font-size: 28rpx;
}
.tab-bar {
	display: flex;
	background: #fff;
	border-radius: 24rpx;
	margin-bottom: 20rpx;
}
.tab {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 30rpx;
	color: #202020;
	border-bottom: 4rpx solid transparent;
}
.active {
	font-weight: bold;
	position: relative;
	color: #202020;
	font-weight: bold;
	&::after {
		width: 20rpx;
		position: absolute;
		content: "";
		bottom: 0;
		height: 6rpx;
		border-radius: 10rpx;
		background: #1976ff;
		left: 50%;
		transform: translateX(-50%);
	}
}
.table {
	background: #F6F7FA;
	border-radius: 24rpx;
	margin: 40rpx 0 20rpx;
	overflow:hidden;
}
.table-header, .table-row {
	display: flex;
	align-items: center;
	background: #ECF1FA;
}
.table-row{
	background:#F6F7FA;
}
.table-header {
	font-weight: bold;
	color: #888;
	font-size: 24rpx;
	border-bottom: 4rpx solid #fff;
}
.th {
	flex: 2;
	color: #4F73A4;
	padding: 16rpx 0;
	border-right: 4rpx solid #fff;
}
.th:first-child{
	text-align: center;
}
.th:last-child{
	border-right: 0 solid #fff;
}
.th:nth-child(2){
	flex: 1;
	text-align: center;
}
.th:last-child {
	flex: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}
.td {
	flex: 2;
	font-size: 24rpx;
	color: #333;
	padding: 16rpx 0;
	border-right: 4rpx solid #fff;
}
.td:first-child{
	color: #40679B;
	text-indent: 10rpx;
}
.td:last-child{
	border-right: 0 solid #fff;
}
.td:nth-child(2){
	flex: 1;
	text-align: center;
}
.td:last-child {
	flex: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.line-total{
	position: relative;
	width: 80%;
	height: 8rpx;
	border-radius: 14rpx;
	background: #FFFFFF;
}
.line-num{
	position: absolute;
	background: #1664FF;
	border-radius: 14rpx;
	height: 8rpx;
	width: 20%;
	left: 0;
}
.do-btn {
	padding: 5rpx 0rpx;
	margin: 0 10rpx 0 0;
	font-size: 22rpx;
	border-radius: 24rpx;
	margin-left: 10rpx;
	background:rgba(22,100,255,0.1);
	color: #1664FF;
	display: flex;
	justify-content: center;
	align-items: center;
}
.continue-btn{
	background:#fff;
	color: #1664FF!important;
	border:2rpx solid #1664FF;
}
.done-btn{
	background: rgba(112, 112, 114, 0.1);
	color: #333;
}
.popup-mask {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.35);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.popup-dialog {
	background: #fff;
	border-radius: 24rpx;
	width: 80vw;
	max-width: 600rpx;
	padding: 48rpx 0 0 0;
	box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.popup-content {
	font-size: 30rpx;
	color: #222;
	text-align: center;
	margin-bottom: 48rpx;
	line-height: 1.6;
}
.popup-actions {
	display: flex;
	width: 100%;
	border-top: 1rpx solid #eee;
}
.popup-btn {
	flex: 1;
	text-align: center;
	padding: 28rpx 0;
	font-size: 30rpx;
	color: #222;
	border-right: 1rpx solid #eee;
}
.popup-btn:last-child {
	border-right: none;
}
.popup-btn.primary {
	color: #1664FF;
	font-weight: bold;
}
.picker-btn-down{
	width: 20rpx;
	height: 14rpx;
	margin-left: 18rpx;
	image{
		width: 100%;
		height: 100%;
		margin-bottom: 20rpx ;
	}
}
.empty{
	min-height: 50vh;
	image{
		width: 40vw;
		height: 240rpx;
	}
	.empty-text{
		margin-top: 16rpx;
		color: #101010;
		font-size: 24rpx;
		font-weight: bold;
	}
	.empty-desc{
		margin-top: 10rpx;
		color: #474747;
		font-size: 20rpx;
	}
}
</style>